<template>
  <div>
    日历二
    <div class="title">
      <div class="prev-btn" @click="prevMonth">上个月</div>
      <div class="text">{{ data.curYear }}年{{ data.curMonth + 1 }}月</div>
      <div class="next-prev" @click="nextMonth">下个月</div>
    </div>
    <div class="main">
      <div class="mian-title">
        <div class="mian-title-li">日</div>
        <div class="mian-title-li">一</div>
        <div class="mian-title-li">二</div>
        <div class="mian-title-li">三</div>
        <div class="mian-title-li">四</div>
        <div class="mian-title-li">五</div>
        <div class="mian-title-li">六</div>
      </div>
      <div class="section">
        <div
          @click="dayHandle(item)"
          class="section-li"
          v-for="item in curMonthList"
          :key="item.id"
          :class="{
            today_li: todayStr === item.id,
            active_li: isHaveData(item),
          }"
        >
          {{ item.day }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
/**
 * prevMonth 点击上个月的时候触发
 * nextMonth 点击下个月的时候触发
 * onChange 月份改变的时候触发
 * dayClick 点击具体日期触发
 */
const emit = defineEmits(['prevMonth','nextMonth','onChange','dayClick'])
const curDate = ref(new Date());
const curMonthList = ref([]);
//202244
const todayStr = ref(
  `${curDate.value.getFullYear()}${curDate.value.getMonth()}${curDate.value.getDate()}`
);
type DataType = {
  curYear:number,
  curMonth:number,
  curDay:number,
}
const data = reactive<DataType>({
  curYear: curDate.value.getFullYear(),
  curMonth: curDate.value.getMonth(),
  curDay: curDate.value.getDate(),
});
// 获取当前这个月有几天
const getCurMonthDays = (date) => {
  // 我需要当前日期 date是你要查询的当前日期
  let year = date.getFullYear();
  let month = date.getMonth();
  //getDate 获取当前日期是这个月的第几天
  //new Date(year,month,0).getDate() 获取上个月的最后一天是上个月的第几天
  return new Date(year, month + 1, 0).getDate();
};
// 获取这个月的第一天是该周的星期几
const getMonthFirstAtWeek = (date) => {
  let year = date.getFullYear();
  let month = date.getMonth();
  // getDay 获取是一周的星期几
  let first = new Date(year, month, 1).getDay();
  let prevMonthLastDay = new Date(year, month, 0).getDate();
  let _arr = [];
  for (let i = 0; i < first; i++) {
    let _obj = {
      year: month === 0 ? year - 1 : year,
      month: month === 0 ? 11 : month - 1,
      day: prevMonthLastDay - i,
    };
    _obj["id"] = `${_obj.year}${_obj.month}${_obj.day}`;
    _arr.unshift(_obj);
  }
  return _arr;
};

// 创建月份列表
const createMonthList = () => {
  curMonthList.value = [];
  const _curDate = new Date(data.curYear, data.curMonth, data.curDay);
  console.log(_curDate);
  // 月第一天 前面的数组
  const prevWeek = getMonthFirstAtWeek(_curDate);
  // 月后面的数组

  // 当前月的长度
  let curMonthLength = getCurMonthDays(_curDate);
  // 当前年
  let curYear = _curDate.getFullYear();
  // 当前月
  let curMonth = _curDate.getMonth();
  // 1-9  01-09 10 11 12
  for (let i = 1; i <= curMonthLength; i++) {
    let _obj = {
      year: curYear,
      month: curMonth,
      day: i,
      data: null,
      trueMonth: curMonth + 1 < 10 ? `0${curMonth + 1}` : curMonth + 1,
      trueDay: i < 10 ? `0${i}` : i,
    };
    _obj["id"] = `${_obj.year}${_obj.month}${_obj.day}`;
    _obj["list_id"] = `${_obj.year}-${_obj.trueMonth}-${_obj.trueDay}`;
    curMonthList.value.push(_obj);
  }
  // 扩展运算符合并数组
  curMonthList.value = [...prevWeek, ...curMonthList.value];
  // console.log(curMonthList)
};
createMonthList();

// 利用当前月的逻辑来判断
const prevMonth = () => {
  if (data.curMonth > 0) {
    data.curMonth = data.curMonth - 1;
  } else if (data.curMonth === 0) {
    data.curMonth = 11;
    data.curYear = data.curYear - 1;
  }
  data.curDay = 1
  createMonthList();
  const _dates = `${data.curYear}-${data.curMonth + 1 < 10 ? (`0${data.curMonth + 1}`) : data.curMonth + 1}-${data.curDay < 10 ? (`0${data.curDay}`) : data.curDay}`
  emit('prevMonth',_dates)
  emit('onChange',_dates)
};
const nextMonth = () => {
  if (data.curMonth < 11) {
    data.curMonth = data.curMonth + 1;
  } else if (data.curMonth === 11) {
    data.curMonth = 0;
    data.curYear = data.curYear + 1;
  }
  data.curDay = 1
  createMonthList();
  
  const _dates = `${data.curYear}-${data.curMonth + 1 < 10 ? (`0${data.curMonth + 1}`) : data.curMonth + 1}-${data.curDay < 10 ? (`0${data.curDay}`) : data.curDay}`
  emit('nextMonth',_dates)
  emit('onChange',_dates)
};

const lists = computed(() => {
  return props.list;
});
const isHaveData = (item) => {
  let status = false;
  lists.value.forEach((cur) => {
    if (cur.time === item.list_id) {
      status = true;
    }
  });
  return status;
};
const dayHandle = (item)=>{
  emit('dayClick',item.list_id)
}
</script>

<style scoped lang='less'>
.title {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 18px;
}
.main {
  background-color: aqua;
  min-height: 100px;
  padding: 0 10px;
  box-sizing: border-box;
  .mian-title {
    display: flex;
    align-content: center;
    .mian-title-li {
      flex: 1;
      background: #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
.section {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .section-li {
    // width: calc(100% / 7);
    flex: 0 1 calc(100% / 7);
    text-align: center;
    line-height: 36px;
  }
}
.today_li {
  background-color: #58bc58;
}
.active_li {
  background: #ebf141;
}
</style>